<template>
  <a-card :bordered="false" class="search-form">
    <a-form :form="form">
      <form-row label="奖项名称">
        <a-form-item>
          <a-select style="width: 320px" @change="handleChange">
            <a-select-option v-for="item in awardsList" :key="item.awards_id" :value="item.awards_id">
              {{ item.awards_name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </form-row>
      <form-row label="获奖等级" style="padding-bottom: 11px">
        <a-form-item>
          <a-select
            mode="multiple" style="max-width: 286px"
            v-decorator="['owner', {initialValue: ['1', '2']}]"
          >
            <a-select-option value="4">全部</a-select-option>
            <a-select-option value="1">一等奖</a-select-option>
            <a-select-option value="2">二等奖</a-select-option>
            <a-select-option value="3">三等奖</a-select-option>
          </a-select>
          <a-divider type="vertical" />
          <a @click="lookAll">全部</a>
        </a-form-item>
      </form-row>
    </a-form>
  </a-card>
</template>

<script>
import FormRow from '../../../components/form/FormRow'
import Axios from "axios";

export default {
  name: 'SearchForm',
  components: {FormRow},
  data() {
    return {
      form: this.$form.createForm(this),
      url: this.$store.state.apiUrl + ':' + this.$store.state.apiPort,
      awardsList: [],
    }
  },
  methods: {
    lookAll () {
      this.form.setFieldsValue({
        owner: '4'
      })
    },
    getPrizeList() {
      Axios.get(this.url + '/pxManagerSystem/getAllAwards')
          .then(res => {
            this.awardsList = res.data.data.awardslist
          }).catch(err => {
        console.log(err)
      })
    },
    // 下拉框 获取所选项目类型id
    handleChange(value) {
      this.$emit('setAwardId', value)
    },
  },
  mounted() {
    this.getPrizeList()
  }
}
</script>

<style lang="less" scoped>
  .search-form{
    margin-bottom: 24px;
  }
</style>
